<template>
  <div class="need-box body-box">
    <div class="need-body">
      <div class="needs-title">需要一块跑帮您什么？</div>
      <el-divider>
        <span class="divider-txt">
          需求类型
          <span class="divider-txt-notnull">*</span>
        </span>
      </el-divider>
      <div class="needs-select-box">
        <div
          :class="item.select ? 'needs-select-option active' : 'needs-select-option'"
          v-for="(item,key) in needs"
          :key="key"
          @click="changeOption(key)"
        >
          {{item.name}}
          <img
            src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/20191101144209.png"
            v-if="item.select"
            class="option-select-icon"
          />
        </div>
      </div>
      <el-divider>
        <span class="divider-txt">
          活动信息
          <span class="divider-txt-notnull">*</span>
        </span>
      </el-divider>
      <div class="needs-select-box">
        <div class="nees-info-item">
          <el-select v-model="city_name" placeholder="请选择城市">
            <el-option
              v-for="(item,key) in city"
              :key="key"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </div>
        <div class="nees-info-item">
          <el-date-picker type="date" v-model="times" placeholder="选择日期"></el-date-picker>
        </div>
        <div class="nees-info-item">
          <el-select v-model="active_people" placeholder="活动人数">
            <el-option
              v-for="(item,key) in people_num"
              :key="key"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </div>
      </div>
      <el-divider>
        <span class="divider-txt">
          是否有采购需求
          <span class="divider-txt-notnull">*</span>
        </span>
      </el-divider>
      <div class="needs-select-box">
        <div
          :class="key == needs_index ? 'needs-needs-item active' : 'needs-needs-item'"
          v-for="(item,key) in needs_needs"
          :key="key"
          @click="changeNeeds(key)"
        >
          {{item.name}}
          <img
            src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/20191101144209.png"
            v-if="key == needs_index"
            class="option-select-icon"
          />
        </div>
      </div>
      <el-divider>
        <span class="divider-txt">
          需求预算
          <span class="divider-txt-notnull">*</span>
        </span>
      </el-divider>
      <div class="needs-select-box">
          <el-row :gutter="20"  style="margin-bottom:20px;">
              <el-col :span="11">
                  <el-input placeholder="最低预算" v-model="low_price" type="number"></el-input>
              </el-col>
              <el-col :span="2">
                  <div style="width:50%;height:1px;background:#ccc;margin:16px auto;"></div>
              </el-col>
              <el-col :span="11">
                  <el-input placeholder="最高预算" v-model="high_price" type="number"></el-input>
              </el-col>
          </el-row>
      </div>
      <el-divider>
        <span class="divider-txt">
          需求概述
          <span class="divider-txt-notnull">*</span>
        </span>
      </el-divider>
      <div class="needs-select-box">
          <el-input class="need-txtarea" type="textarea" v-model="needs_txt" placeholder="例如：我们公司下个月18日在北京朝阳区计划举办一个千人行业大会，对于活动场地、舞台灯光、宣传推广等等都有需求，预算有限希望能有整合套餐服务！"></el-input>
      </div>
      <el-divider>
        <span class="divider-txt">
          留下联系方式我们将有专人与您联系
          <span class="divider-txt-notnull">*</span>
        </span>
      </el-divider>
      <div class="needs-select-box">
          <el-input v-model="mobile_email" placeholder="手机号/邮箱"></el-input>
      </div>
      <div class="com-btn needs-btn">立即提交</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      needs: [
        { name: "活动场地", select: false },
        { name: "现场互动", select: false },
        { name: "舞台灯光", select: false },
        { name: "活动执行", select: false },
        { name: "电子签到", select: false },
        { name: "胸牌制作", select: false },
        { name: "付费推广", select: false },
        { name: "精准营销", select: false },
        { name: "媒体传播", select: false },
        { name: "招商赞助", select: false }
      ],
      needs_select: [],
      city: [
        { value: 1, label: "北京" },
        { value: 2, label: "天津" },
        { value: 3, label: "上海" }
      ],
      times: "",
      city_name: "",
      people_num: [
        { value: 1, label: "50人以下" },
        { value: 2, label: "50-100人" },
        { value: 3, label: "100-200人" },
        { value: 4, label: "200-300人" },
        { value: 5, label: "300人以上" }
      ],
      active_people: "",
      needs_needs: [
        { name: "否", select: false },
        { name: "是", select: false }
      ],
      needs_index: -1,
      low_price : '',
      high_price : '',
      needs_txt : '',
      mobile_email : '',
    };
  },
  mounted() {
    window.document.title = "需求提交";
  },
  methods: {
    //选择取消选择需求
    changeOption(key) {
      this.needs[key].select = this.needs[key].select ? false : true;
      this.needs_select = [];
      for(var i in this.needs) {
          if(this.needs[i].select) {
              this.needs_select.push(this.needs[i]);
          }
      }
    },
    changeNeeds(key) {
      this.needs_index = key;
    }
  }
};
</script>

<style>
.needs-btn{
    width: 420px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin:20px auto;
    cursor: pointer;
}
.need-txtarea textarea{
    height: 150px;
}
.nees-info-item {
  float: left;
  width: calc(33.3% - 30px);
  height: 40px;
  margin-right: 20px;
  margin-bottom: 10px;
}
.nees-info-item:nth-child(2) {
  width: calc(33.3% + 20px);
}
.nees-info-item:last-child {
  margin-right: 0;
}
.needs-select-box {
  overflow: hidden;
  margin-top: 40px;
}
.needs-select-option,
.needs-needs-item {
  position: relative;
  float: left;
  width: calc(20% - 16px);
  margin-right: 20px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  background: #f1f1f1;
  margin-bottom: 20px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #f1f1f1;
  overflow: hidden;
}
.needs-select-option:hover,
.needs-select-box .active,
.needs-needs-item:hover {
  border-color: #8a70c6;
  background: #fff;
}
.needs-needs-item {
  margin-right: 0;
  float: left;
  width: calc(50% - 20px);
  height: 50px;
  line-height: 50px;
}
.needs-needs-item:last-child {
  float: right;
}
.needs-select-option:nth-child(5),
.needs-select-option:last-child {
  margin-right: 0;
}
.option-select-icon {
  position: absolute;
  top: 0;
  right: 0;
}
.need-box {
  /* position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9;
  overflow-y: auto;
  padding-bottom: 20px;
  background: #fff; */
}
.need-body {
  width: 600px;
  margin: auto;
}
.needs-title {
  font-size: 20px;
  margin: 30px 0;
}
.divider-txt {
  color: #999;
}
.divider-txt-notnull {
  color: #f56c6c;
}
</style>